<template>
  <div class="multiple">
    <div class="topic" v-for="(item, index) in multipleTopic">
      <p class="multiple_num">
        {{index + 1}}.
        <span class="mold">（多选题 {{item.sorce}} 分）</span>
      </p>

      <p class="name" v-html="item.topicSubject"></p>

      <div class="select">
        <p v-for="(iter, i) in item.topicOptions" @click="selectClick(i,index)">
          <span class="option multiples">{{option[i]}}</span>
          <span class="text" v-html="iter"></span>
        </p>
      </div>

      <div class="correctAnswer" v-show="isSubmit">
        正确答案:
        <span
          class="correctOption"
          v-html="item.currect"
          :class="{'right': item.situation == '1'}"
        ></span>
      </div>
    </div>
  </div>
</template>

<script>
import Bus from '@/common/bus';

export default {
  name: 'multiple',
  data() {
    return {
      currentIndex: [],
      isSubmit: false,
      option: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'],
      optionMax: [],
    };
  },
  props: {
    multipleTopic: {
      type: Array,
      default: [],
    },
  },
  watch: {
    multipleTopic: {
      handler(n, o) {
        this.init();
      },
    },
  },
  mounted() {
    this._submited();
  },
  methods: {
    init() {
      this.optionMax = [];
      for (let item of this.multipleTopic) {
        this.optionMax.push(item.topicOptions.length);
      }
    },

    selectClick(index, cIndex) {
      var multipleSelect = document.querySelectorAll('.multiples');
      var val = document.querySelectorAll('.text');
      let flag = false; /* 用于记录该题是否已做 */
      let optionList = []; /* 保存选项 */
      let valList = []; /* 保存选项信息 */

      // 获取当前点击的选项
      var iid = index;
      if (cIndex != 0) {
        for (let i = 1; i <= cIndex; i++) {
          iid += this.optionMax[i - 1];
        }
      }

      // 判断当前选项是否已选择，没选就选中
      multipleSelect[iid].classList.toggle('checked');

      // 判断当前题是否已选择
      if (cIndex == 0) {
        for (let i = 0; i < this.optionMax[cIndex]; i++) {
          if (multipleSelect[i].classList.value.indexOf('checked') != -1) {
            flag = true;
            break;
          } else {
            flag = false;
          }
        }
      } else {
        let j = cIndex * this.optionMax[cIndex - 1];
        let max = j + this.optionMax[cIndex];
        for (let i = j; i < max; i++) {
          if (multipleSelect[i].classList.value.indexOf('checked') != -1) {
            flag = true;
            break;
          } else {
            flag = false;
          }
        }
      }

      for (let j = cIndex * 4; j < cIndex * 4 + 4; j++) {
        if (multipleSelect[j].classList.value.indexOf('checked') != -1) {
          optionList.push(multipleSelect[j].innerHTML); /* 保存选择项 */
          valList.push(val[j].innerHTML); /* 保存选项信息 */
        }
      }

      var multipleTopicOk = {
        num: cIndex + 1,
        finish: flag,
        topicList: {
          id: this.multipleTopic[cIndex].id,
          kind: '1',
          submitAnswer: optionList,
        },
        value: valList,
      };

      Bus.$emit('multipleTopic', multipleTopicOk);
    },

    _submited() {
      Bus.$on('submit', () => {
        this.isSubmit = true;
      });
    },
  },
  beforeDestroy() {
    Bus.$off('submit');
  },
};
</script>

<style scoped>
.multiple .topic {
  margin-bottom: 50px;
}
.multiple .mold {
  color: #a8a8b3;
}
.multiple .name {
  width: 800px;
  line-height: 24px;
  margin-bottom: 20px;
}
.multiple .select > p {
  padding: 5px 0 10px 0;
  line-height: 34px;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  color: rgb(96, 98, 102);
  transition: all 0.3s;
}
.multiple .select > p:hover {
  background-color: #f7fafc;
}

.multiple .select p .option {
  height: 34px;
  width: 34px;
  text-align: center;
  outline: none;
  border: 1px solid #e1eaf4;
  margin-right: 20px;
  transition: all 0.3s;
}
.multiple .select p .checked {
  background-color: #6486ff;
  color: #fff;
}
.multiple .select p .option:hover {
  background-color: #3a8bff;
  color: #e6f0ff;
}
.correctAnswer {
  height: 60px;
  line-height: 60px;
  text-indent: 1rem;
  font-size: 16px;
  background-color: #f2f4f7;
  border-left: 1px solid #6486ff;
}
.correctAnswer .correctOption {
  display: inline-block;
  margin-right: 8px;
  color: #f00;
  text-transform: uppercase;
}
.right {
  color: #6486ff !important;
}
</style>